<template>
  <div class="vr-wrapper">
    <div class="vr-top-bar">
        <div class="arr-left"><van-icon name="arrow-left" size="20" @click="$router.go(-1)" /></div><div class="title">{{title}}</div>
    </div>
    <div id="vr-view"></div>
  </div>
</template>

<script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
    date(){
        return{
            title:"",
        }
    },
  created() {
     const {query:{title}} = this.$route;
    this.title = title;
  },
  mounted() {
    this.vrInit();
  },
  methods: {
    vrInit() {
      new Viewer({
        container: document.querySelector("#vr-view"),
        panorama: {
          left: require("../../assets/VR/3_l.jpg"),
          front: require("../../assets/VR/3_f.jpg"),
          right: require("../../assets/VR/3_r.jpg"),
          back: require("../../assets/VR/3_b.jpg"),
          top: require("../../assets/VR/3_u.jpg"),
          bottom: require("../../assets/VR/3_d.jpg"),
        },
        
      });
    },
  },
};
</script>

<style lang="less">
.vr-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .vr-top-bar{
      position: absolute;
      height: 45px;
      width: 100%;
      left: 0;
      z-index: 3;
      color: #fff;
      display: flex;
      align-items: center;
      box-shadow:0px -22px 32px 9px #fff;
      .arr-left{
        padding-left:15px ;
        width: 50px;
      }
      .title{
          margin: 0 10px;
          font-size: 14px;
      }
  }
    #vr-view{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}
</style>